<template>
  <div
    class="genres scrollbar"
    v-if="girlsChannel.length > 0 || boysChannel.length > 0"
  >
    <div class="genres-box">
      <div class="head">
        <h2 class="title">Genres</h2>
      </div>
      <div class="main">
        <div class="v-scroll" @click="scrollClick($event)">
          <vue-seamless-scroll
            class="seamless-warp"
            :data="girlsChannel"
            :class-option="optionRight"
          >
            <ul class="girls-box">
              <li v-for="item of girlsChannel" :key="item.id">
                <img
                  :src="item.imgUrl"
                  :data-sex="'female'"
                  :data-id="item.categoryId"
                  v-default-img="defaultImg"
                />
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
        <div class="v-scroll" @click="scrollClick($event)">
          <vue-seamless-scroll
            class="seamless-warp"
            :data="boysChannel"
            :class-option="optionLeft"
          >
            <ul class="boys-box">
              <li v-for="item of boysChannel" :key="item.id">
                <img
                  :src="item.imgUrl"
                  :data-sex="'male'"
                  :data-id="item.categoryId"
                  v-default-img="defaultImg"
                />
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  props: {
    list: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      defaultImg: require("@/assets/images/default-genres-cover.png"),
    };
  },
  components: {
    vueSeamlessScroll,
  },
  computed: {
    optionRight() {
      return {
        step: this.girlsChannel.length >= 4 ? 0.7 : 0, // 数值越大速度滚动越快
        direction: 3, //方向 0 往下 1 往上 2向左 3向右
        limitMoveNum: 4, //开启无缝滚动的数据量
        hoverStop: true, //是否启用鼠标hover控制
      };
    },
    optionLeft() {
      return {
        step: this.boysChannel.length >= 4 ? 0.7 : 0,
        direction: 2, //方向 0 往下 1 往上 2向左 3向右
        limitMoveNum: 4, //开启无缝滚动的数据量
        hoverStop: true, //是否启用鼠标hover控制
      };
    },
    girlsChannel() {
      if (this.list && this.list.girlsChannel.length > 0) {
        return this.newSort(this.list.girlsChannel, "sort");
      } else {
        return [];
      }
    },
    boysChannel() {
      if (this.list && this.list.boysChannel.length > 0) {
        return this.newSort(this.list.boysChannel, "reverse");
      } else {
        return [];
      }
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    newSort(arr, order) {
      if (order === "sort") {
        return arr.sort(this.utils.compareSort("sort"));
      } else if (order === "reverse") {
        return arr.sort(this.utils.compareReverse("sort"));
      }
    },
    scrollClick(e) {
      let data = e.target.dataset;
      if (data.id) {
        this.$router.push({
          name: "libraryView",
          params: {
            sex: data.sex,
            genre: data.id,
            state: "all",
          },
        });
      }
      // this.$emit("toLibrary", data.sex, data.id);
    },
    // 跳转library页
    //   toLibrary(sex, id) {
    //     this.$router.push({
    //       name: "libraryView",
    //       params: {
    //         sex,
    //         genre: id,
    //         state: "all",
    //       },
    //     });
    //     // 1男频；2女频
    //     // if(item.preference === 1) {
    //     //   this.$router.push({
    //     //     name: "libraryView",
    //     //     params: {
    //     //       sex: "female",
    //     //       genre: item.categoryId,
    //     //       state: "all"
    //     //     }
    //     //   })
    //     // } else if(item.preference === 2) {
    //     //   this.$router.push({
    //     //     name: "libraryView",
    //     //     params: {
    //     //       sex: "female",
    //     //       genre: item.categoryId,
    //     //       state: "all"
    //     //     }
    //     //   })
    //     // }
    //   },
  },
};
</script>

<style lang="scss" scoped>
.genres {
  // height: 500px;
  background: #fff6f6;
  .genres-box {
    width: 1200px;
    margin: auto;
    .head {
      padding: 48px 0 32px 0;
      .title {
        display: flex;
        align-items: center;
        font-size: 24px;
        line-height: 40px;
        font-family: Poppins-SemiBold, Poppins;
        &::before {
          content: "";
          width: 8px;
          height: 30px;
          border-radius: 0px 4px 4px 0px;
          display: inline-block;
          margin-right: 8px;
          background: #e86472;
        }
      }
    }
    .main {
      .v-scroll {
        // padding-bottom: 56px;
        .seamless-warp {
          width: 100%;
          overflow: hidden;
          ul {
            width: 1344px;
            height: 160.8px;
            display: flex;
            align-items: center;
            li {
              margin: 0 28px;
              img {
                width: 280px;
                height: 134px;
                cursor: pointer;
                border-radius: 16px;
              }
              &:hover {
                margin: 0;
                img {
                  width: 336px;
                  height: 160.8px;
                  border-radius: 19px;
                }
              }
            }
            // &.girls-box {
            // }
            // &.boys-box {
            // }
          }
        }
      }
    }
  }
}
</style>
